<template>
	<view class="address">
		<view class="list" v-if='list.length'>
			<view class="addOne dFlex jBetween_aCenter" v-for="(item,index) in list" :key='item.id' @click="chooseAdd(item)">
				<view class="addContent">
					<view class="user">{{item.receiver}} {{item.phone}}</view>
					<view class="add">{{item.address+item.address_detail}}</view>
				</view>
				<view class="tools dFlex jEnd_aCenter">
					<view class="btn imgPublic" @click.stop='opAdd(item)'>
						<image src="../static/images/bj@2x.png" mode="widthFix"></image>
					</view>
					<view class="btn imgPublic" @click.stop='delAdd(item.id)'>
						<image src="../static/images/sc@2x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
		<view class="btns">
			<view class="btn dFlex jCenter_aCenter" @click="opAdd('')">
				<view class="addIcon imgPublic">
					<image src="../static/images/tj@2x.png" mode="widthFix"></image>
				</view>
				<text>添 加 地 址</text>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	import {
		getAddressList,deleteAddress
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				list:[],
			};
		},
		onShow(){
			// 收货地址
			this.getAddressList();
		},
		methods:{
			async getAddressList(){
				let res = await getAddressList({});
				if(res){
					this.list = res;
				}
			},
			// 添加地址
			opAdd(info){
				uni.navigateTo({
					url:'./opAdd?info='+(info ? JSON.stringify(info) : '')
				})
			},
			// 删除地址
			async delAdd(id){
				let res = await deleteAddress({
					id:id,
				});
				if(res){
					this.getAddressList();
				}
			},
			// 选择地址
			chooseAdd(line){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];// 上级页面实例
				prevPage.$vm.address = line;
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.address{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.btns{
			width:100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0;
			left:0;
			.btn{
				width:100%;
				padding:8px 0;
				text-align: center;
				color:white;
				border-radius: 50px;
				background: #F4F4F4 linear-gradient(180deg, #3E8EF0 0%, #1362C9 100%);
			}
		}
		.list{
			width:100%;
			padding:0 10px;
			box-sizing: border-box;
			background:white;
			border-radius: 5px;
			.addOne{
				width:100%;
				padding:12px 0;
				border-bottom: 1px solid #e6e6e6;
				.addContent{
					flex: 1;
					.add{
						font-size: 12px;
						color:#808080;
						margin-top: 6px;
					}
					.user{
						font-weight: bold;
						font-size: 13px;
					}
				}
				.tools{
					width: max-content;
					.btn{
						width:18px;
						height: 18px;
						margin-left: 6px;
					}
				}
			}
			.addOne:last-child{
				border:none;
			}
		}
	}
</style>
